<template>
<div style="height:100%">
  <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goPrev">
      </div>
      <span slot="center">
        发布详情
      </span>
    </topHeader>
  <div class="orderInfo">
    <div class="order_li">
      <div class="order_li_l" id="copyMy">
        <p>【始终点】： {{ orderInfo.start }}&rarr; {{ orderInfo.end }}</p>
        <p>【时间】：{{ orderInfo.outtime }}</p>
        <p>【路线】：{{ orderInfo.roadline }}</p>
        <p>【座位】：{{ orderInfo.freeSeat }}</p>
        <p>【车型】：{{ orderInfo.motorType }}</p>
        <p>【车主】：{{ orderInfo.name }}</p>
        <p @click="goTel(orderInfo.phone)" v-if="isShow">【电话】<span style="color: #568df4">{{ orderInfo.phone }}【点击拨打】</span></p>
        <p>【预定】：{{ toUrl }}</p>
        <p>【乘客分摊费用】：{{ orderInfo.cost }}</p>
        <p>【备注】：{{ orderInfo.remark }}</p>
      </div>
    </div>
    <div class="order_btn" @click="doOrder">
      立即预约
    </div>
    <div class="summit_btn" @click="Copy" data-clipboard-action="copy" :data-clipboard-text="text">
      一键复制
    </div>
  </div>
  <popup v-model="focusShow" position="bottom" width="100%" height="100%">
    <topHeader>
      <div slot="center">
        <span>关注公众号</span>
      </div>
      <div class="close" slot="right" @click="Cancle" style="font-size:25px;">
        &times;
      </div>
    </topHeader>
    <div class="kefu_box">
      <div class="kefu_img">
        <img src="./../../assets/img/gzh.jpg" alt="">
      </div>
      <div class="text">
        （长按图片扫描关注微信公众号）
      </div>
    </div>
  </popup>
</div>
</template>

<script>
import { loadReverInfo } from '@/api/allapis'
import { Toast, Popup } from 'vux'
import topHeader from './../../components/topHeader'
export default {
  data () {
    return {
      orderInfo: {},
      text: null,
      toUrl: '',
      focusShow: false,
      isShow: true
    }
  },

  components: {
    topHeader,
    Toast,
    Popup
  },

  computed: {},

  mounted () {
    this.loadOrderInfo()
    if (this.$route.query.isShow && this.$route.query.isShow === '0') {
      this.isShow = false
    } else {
      this.isShow = true
    }
  },

  methods: {
    goPrev () {
      this.$router.go(-1)
    },
    loadOrderInfo () {
      loadReverInfo({ orderId: this.$route.query.orderId }).then(res => {
        this.orderInfo = res.data
        this.toUrl = `www.rrtxsfc.com/wx/publishInfo?orderId=${this.$route.query.orderId}&isShow=0`
        this.text = `[始终点]:${res.data.start} --> ${res.data.end}${'\n'}[时间]:${res.data.outtime}${'\n'}[路线]:${res.data.roadline}${'\n'}[座位]:${res.data.freeSeat}${'\n'}[车型]:${res.data.motorType}${'\n'}[车主]:${res.data.name}${'\n'}[预定]:${this.toUrl}${'\n'}[车费]:${res.data.cost}${'\n'}[备注]:${res.data.remark}`
      })
    },
    goTel (phone) {
      window.location.href = 'tel:' + phone
    },
    Copy () {
      let self = this
      let clipboard = new this.clipboard('.summit_btn')
      clipboard.on('success', function () {
        // alert('成功')
        self.$vux.alert.show({
          title: '人人同行提示',
          content: '已复制，可以发布到车友群中',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      })
      clipboard.on('error', function () {
        // alert('失败')
      })
    },
    doOrder () {
      this.focusShow = true
    },
    Cancle () {
      this.focusShow = false
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./publishInfo.less');
</style>